<!-- eslint-disable vue/no-mutating-props -->
<template>
    <div class="drawer_container">
        <div v-if="drawerType === 'grid'">
            <div class="drawer_title">画布背景设置</div>
            <div class="drawer_wrap">
                <AForm>
                    <AFormItem label="是否显示画布设置">
                        <a-switch v-model="showGrid" @change="changeGrid" />
                    </AFormItem>
                    <div v-show="showGrid">
                        <AFormItem label="网格类型">
                            <ARadioGroup v-model="grid.type">
                                <ARadio
                                    v-for="item in gridTypeList"
                                    :key="item.value"
                                    :value="item.value"
                                    @change="changeGridType($event, item.value)"
                                >
                                    <span>{{ item.label }}</span>
                                </ARadio>
                            </ARadioGroup>
                        </AFormItem>
                        <AFormItem label="网格大小">
                            <ASlider v-model="grid.size" :min="0" :max="30" @change="changeGrid" />
                        </AFormItem>
                        <!-- <AFormItem label="网格颜色">
                            <colorPicker v-model="girdColor" @change="changeGrid" />
                        </AFormItem> -->
                        <AFormItem label="网格线宽度">
                            <ASlider v-model="grid.args.thickness" :min="0" :max="20" @change="changeGrid" />
                        </AFormItem>
                    </div>
                </AForm>
            </div>
        </div>
        <div v-if="drawerType === 'node'" style="background-color: #fff;">
            <div class="drawer_title">节点设置</div>
            <div class="drawer_wrap">
                <AForm>
                    <AFormItem label="节点文本">
                        <AInput v-model="drawerNode.nodeText" @change="changeNodeText" />
                    </AFormItem>
                    <AFormItem label="节点背景">
                        <colorPicker v-model="drawerNode.fill" class="picker-color" @change="changeFill" />
                    </AFormItem>
                    <AFormItem label="字体大小">
                        <ASlider v-model="drawerNode.fontSize" :min="10" :max="20" @change="changefontSize" />
                    </AFormItem>
                    <AFormItem label="字体颜色">
                        <colorPicker v-model="drawerNode.fontFill" @change="changeFontFill" />
                    </AFormItem>
                    <AFormItem label="边框宽度">
                        <ASlider v-model="drawerNode.strokeWidth" :min="0" :max="10" @change="changeStrokeWidth" />
                    </AFormItem>
                    <AFormItem label="边框颜色">
                        <colorPicker v-model="drawerNode.stroke" @change="changeStroke" />
                    </AFormItem>
                    <AFormItem label="功能">
                        <!-- <Button type="primary" icon="md-trending-up" @click="toTopZIndex">置顶</Button> -->
                        <AButton type="danger" @click="deleteNode">删除</AButton>
                    </AFormItem>
                </AForm>
            </div>
        </div>
        <div v-if="drawerType === 'edge'" style="background-color: #FFF;">
            <div class="drawer_title">线条设置</div>
            <div class="drawer_wrap">
                <AForm>
                    <AFormItem label="线条文本">
                        <AInput v-model="drawerEdge.EdgeText" @change="changeEdgeText" />
                    </AFormItem>
                    <AFormItem label="线条宽度">
                        <ASlider v-model="drawerEdge.edgeWidth" :min="1" :max="10" @change="changeEdgeWidth" />
                    </AFormItem>
                    <AFormItem label="线条颜色">
                        <colorPicker v-model="drawerEdge.edgeColor" @change="changeEdgeColor" />
                    </AFormItem>
                    <AFormItem label="功能">
                        <!-- <AButton type="primary" icon="md-trending-up" @click="toTopZIndex">置顶</AButton> -->
                        <AButton type="danger" class="margin-left-10" icon="md-trash" @click="deleteNode">删除</AButton>
                    </AFormItem>
                </AForm>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
// import colorPicker from 'vcolorpicker'
export default {
    name: 'RightDrawer',
    components: {
        // colorPicker
    },
    props: {
        drawerType: {
            type: String
        },
        selectCell: {
            type: String | Object
        },
        graph: {
            type: String | Object
        },
        grid: {
            type: Object
        }
    },
    data() {
        return {
            gridTypeList: [
                {
                    label: '四边网格',
                    value: 'mesh'
                },
                {
                    label: '点状网格',
                    value: 'dot'
                }
            ],
            showGrid: true,
            drawerNode: {
                fill: '',
                nodeText: '',
                fontSize: null,
                fontFill: '',
                strokeWidth: null,
                stroke: ''
            },
            drawerEdge: {
                EdgeText: '',
                edgeWidth: null,
                edgeColor: ''
            },
            // // 节点背景
            // nodeColor: '#ff0000',
            // // 文本颜色展示
            // textColor: '#24acf2',
            // // 网格颜色
            // girdColor: '#1a9c35'
        };
    },
    watch: {
        selectCell: {
            handler(val) {
                if (val) {
                    if (val.isNode()) { //节点
                        this.drawerNode.fill = val.store.data.attrs.body.fill;
                        this.drawerNode.nodeText = val.store.data.attrs.label.text;
                        this.drawerNode.fontFill = val.store.data.attrs.label.fill;
                        this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize);
                        this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth);
                        this.drawerNode.stroke = val.store.data.attrs.body.stroke;
                    } else { //边
                        this.drawerEdge.EdgeText = val.store.data.labels ? val.store.data.labels[0].text : '';
                        this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth);
                        this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
                    }
                }
            },
            immediate: true,
            deep: false
        }
    },
    created() {

    },
    mounted() {
    },
    methods: {
        // 网格设置
        changeGrid() {
            this.showGrid ? this.graph.showGrid() : this.graph.hideGrid();
        },
        changeGridType(e, value) {
            // console.log(value,'e');
            this.grid.type = value;
            this.changeGrid();
        },
        changeGrid() {
            this.graph.drawGrid({
                ...this.grid
            });
        },
        // 节点设置
        changeStrokeWidth(val) {
            this.selectCell.attr('body/strokeWidth', val);
        },
        changefontSize(val) {
            this.selectCell.attr('label/fontSize', val);
        },
        changeNodeText() {
            this.selectCell.attr('label/text', this.drawerNode.nodeText);
        },
        changeStroke(val) {
            this.drawerNode.stroke = val;
            this.selectCell.attr('body/stroke', this.drawerNode.stroke);
        },
        changeFontFill(val) {
            this.drawerNode.fontFill = val;
            this.selectCell.attr('label/fill', this.drawerNode.fontFill);
        },
        changeFill(val) {
            this.drawerNode.fill = val;
            this.selectCell.attr('body/fill', val);
        },
        changeEdgeColor (val) {
			this.drawerEdge.stroke = val
			this.selectCell.attr('line/stroke', this.drawerEdge.stroke)
		},
        // 边设置
        changeEdgeText() {
            console.log(this.drawerEdge.EdgeText);
            this.selectCell.setLabels(
                [{ attrs: { label: { text: this.drawerEdge.EdgeText } } }]
            );
        },
        changeEdgeWidth(val) {
            this.drawerEdge.edgeWidth = val;
            this.selectCell.attr('line/strokeWidth', this.drawerEdge.edgeWidth);
        },
        // 置顶
        toTopZIndex() {
            this.selectCell.toFront();
        },
        // 删除
        deleteNode() {
            this.$emit('deleteNode');
        }
    }
};
</script>

<style lang="less" scoped>
.drawer_container {
    max-width: 300px;
    min-width: 300px;
    max-height: 600px;
    overflow: hidden;
    overflow-y: auto;

    .drawer_title {
        border-bottom: 1px solid #e8eaec;
        box-sizing: border-box;
        padding: 14px 16px;
        color: #333;
        font-size: 16px;
    }

    .drawer_wrap {
        box-sizing: border-box;
        padding: 20px 10px 20px 20px;
    }

    /deep/.picker-color {
		.colorBtn {
			background-color: #1b9c35 !important;
		}
	}
}

</style>
